<template>
  <div class="app-content">
    <div id="stencil"></div>
    <div id="container"></div>
    <TeleportContainer />
  </div>
</template>

<script lang="ts">
import { Stencil } from '@antv/x6-plugin-stencil'
import { defineComponent } from 'vue'
import ProgressNode from './ProgressNode.vue'
import ColorBox from './ColorBox.vue'
import { Graph,Shape,Color } from '@antv/x6'
import { register,getTeleport } from '@antv/x6-vue-shape'
import { CircularLayout } from '@antv/layout'

const ports = {
  groups: {
    top: {
      position: 'top',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    right: {
      position: 'right',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    bottom: {
      position: 'bottom',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    left: {
      position: 'left',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
  },
  items: [
    {
      group: 'top',
    },
    {
      group: 'right',
    },
    {
      group: 'bottom',
    },
    {
      group: 'left',
    },
  ],
}
register({
  shape: 'custom-vue-node',
  width: 100,
  height: 100,
  component: ProgressNode,
  ports: { ...ports },
})
register({
  shape: 'custom-vue-color-box',
  width: 120,
  height: 50,
  component: ColorBox,
  ports: { ...ports },
})
const TeleportContainer = getTeleport()

export default defineComponent({
  name: 'App',
  components: {
    TeleportContainer,
  },
  mounted() {
    const graph = new Graph({
      container: document.getElementById('container'),
      background: {
        color: '#F2F7FA',
      },
      autoResize: true,
      grid: true,
      connecting: {
        router: 'manhattan',
        connector: {
          name: 'rounded',
          args: {
            radius: 8,
          },
        },
        anchor: 'center',
        connectionPoint: 'anchor',
        allowBlank: false,
        snap: {
          radius: 20,
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#A2B1C3',
                strokeWidth: 2,
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8,
                },
              },
            },
            zIndex: 0,
            tools: {
              name: 'button-remove',
              args: { distance: -40 },
            },
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        },
      },
    })
    const stencil = new Stencil({
      title: '流程图',
      target: graph,
      stencilGraphWidth: 200,
      stencilGraphHeight: 180,
      groups: [
        {
          title: '基础流程图',
          name: 'group1',
        }
      ],

      // collapsable: true,
      layoutOptions: {
        columns: 2,
        columnWidth: 100,
        rowHeight: 100,
      },
    })
    document.getElementById('stencil').appendChild(stencil.container)
    const r1 = graph.createNode({
      shape: 'custom-vue-node',
      label: '开始',
      attrs: {
        body: {
          rx: 20,
          ry: 26,
        },
      },
    })
    const r2 = graph.createNode({
      shape: 'custom-vue-color-box',
      label: '开始',
      attrs: {
        body: {
          rx: 20,
          ry: 26,
        },
      },
    })
    stencil.load([r1,r2],'group1')
    // 控制连接桩显示/隐藏
    const showPorts = (ports,show: boolean) => {
      for (let i = 0,len = ports.length; i < len; i += 1) {
        ports[i].style.visibility = show ? 'visible' : 'hidden'
      }
    }
    graph.on('node:mouseenter',() => {
      const container = document.getElementById('container')!
      const ports = container.querySelectorAll(
        '.x6-port-body',
      )
      showPorts(ports,true)
    })
    graph.on('node:mouseleave',() => {
      const container = document.getElementById('container')!
      const ports = container.querySelectorAll(
        '.x6-port-body',
      )
      showPorts(ports,false)
    })
    const node1 = graph.addNode({
      shape: 'custom-vue-node',
      x: 100,
      y: 60,
      data: {
        progress: 10,
      }
    })
    const node2 = graph.addNode({
      shape: 'custom-vue-node',
      x: 400,
      y: 60,
      data: {
        progress: 20,
      }
    })
    const node3 = graph.addNode({
      shape: 'custom-vue-node',
      x: 100,
      y: 260,
      data: {
        progress: 30,
      }
    })
    const node4 = graph.addNode({
      shape: 'custom-vue-color-box',
      x: 500,
      y: 260,
      data: {
        color: '#0ffff0',
      }
    })
    // const update = () => {
    //   [node1,node2,node3].forEach((node,index) => {
    //     const { progress } = node.getData()
    //     node.setData({
    //       progress: (progress + index + 1) % 100,
    //     })
    //   })
    //   node4.setData({
    //     color: Color.randomHex()
    //   })
    //   setTimeout(update,1000)
    // }

    // update()

    const circularLayout = new CircularLayout({ radius: 10 });
    // console.log(graph.getAllNodes())
    
      // (async () => {
      //   // 1. Return positions of nodes & edges.
      //   const positions = await circularLayout.execute(graph);

      //   console.log(positions)
      //   // 2. To directly assign the positions to the nodes:
      //   // await circularLayout.assign(graph);
      // })();
    // graph.addEdge({
    //   source: {
    //     cell: node1,
    //     anchor: {
    //       name: 'midSide',
    //       args: {
    //         dx: 10,
    //       },
    //     },
    //   },
    //   target: {
    //     cell: node2,
    //     anchor: 'orth', // 没有参数时可以简化写法
    //   },
    // })
    // graph.addEdge({
    //   source: {
    //     cell: node3,
    //     anchor: {
    //       name: 'midSide',
    //       args: {
    //         dx: 10,
    //       },
    //     },
    //   },
    //   target: {
    //     cell: node2,
    //     anchor: 'orth', // 没有参数时可以简化写法
    //   },
    // })
    // // graph.addEdge({
    //   source: {
    //     cell: node3,
    //     anchor: {
    //       name: 'midSide',
    //       args: {
    //         dx: 10,
    //       },
    //     },
    //   },
    //   target: {
    //     cell: node4,
    //     anchor: {
    //       name: 'midSide',
    //       args: {
    //         dx: 10,
    //       },
    //     },
    //   },
    // })
  },
})
</script>
<style lang="less" scope>
.app-content {
  display: flex;
  width: 100%;
  height: 100%;
}

#container {
  width: calc(100% - 180px) !important;
  height: calc(100vh - 72px) !important;

  .x6-graph-svg-decorator:hover {
    [data-tool-name="button-remove"] {
      display: block;
    }
  }

  [data-tool-name="button-remove"] {
    display: none;
  }
}

#stencil {
  width: 180px;
  height: calc(100vh - 72px) !important;
  position: relative;
  border-right: 1px solid #dfe3e8;
}
</style>